<style scoped>
	image{
		width: 100%;
	}
	.page{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>

<template>
	<view class="page container bac-color-efeff4">
		<!-- 轮播图开始 -->
		<view class="banner-box mar-t-12 over-hide" style="height: 146px !important;">
			<swiper
				class="banner"
				style="height: 146px !important;"
				indicator-color="#d5d5d5"
				indicator-active-color="#ffffff"
				:indicator-dots="true"
				:autoplay="autoplay"
				:interval="interval"
				:duration="duration"
			>
				<swiper-item class="flex-column flex-1" v-for="(item,index) in banners" :key="index" @click="previewImage(banners,index)">
					<image  class="banner-item" :src="item.image" mode="widthFix" lazy-load='true'></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 轮播图结束 -->
		<view class="flex justify-around box-b w-100 mar-t-12">
			<view class="flex flex-column flex-1 box-b justify-between" style="width: 50%;margin-right: 12rpx;">
				<image @click="href('/pages/social/index')" style="margin-bottom: 12rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/dce40567-c5de-4c7b-a130-12b65b0c0097.png" mode="widthFix"></image>
				<image @click="href('/pages/social/list')" style="margin-top: 12rpx;margin-bottom: 12rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/8fe11b86-777e-4d1e-bf3b-35d27bbc64b0.png" mode="widthFix"></image>
				<image style="margin-top: 12rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/feedb98f-9c15-4918-86e4-9d39c819a232.png" mode="widthFix"></image>
			</view>
			<view class="flex flex-column flex-1 box-b justify-between" style="width: 50%;margin-left: 12rpx;">
				<image style="margin-bottom: 12rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/513f4130-6676-4d2e-9964-2c4e38bf4504.png" mode="widthFix"></image>
				<image style="margin-top: 12rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/1189b531-9c43-4a08-845c-29846a3bca83.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				autoplay: true,
				interval:6000,
				duration:500,
				banners:[{
					id:0,
					image:'https://cnxfljj.cncn.gov.cn/uploads/20220109/3af40bddcc566d65fbe3fc18a198463a.jpg'
				}],
				bannerImgs:[],
			}
		},
		components:{
			
		},
		methods: {
			previewImage(banners,index) {
				uni.previewImage({
					urls:this.bannerImgs,
					current:index,
					loop:true
				})
			},
		},
	}
</script>
